<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度热搜</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
		<style type="text/css">
			ul{
				list-style: none;
			}
			.re{
				font-size: 12px;
				padding: 1px;
				background-color: #FF69B4;
				color: #FFFFFF;
				border-radius: 3px;
			}
			.xin{
				font-size: 12px;
				padding: 1px;
				background-color: aquamarine;
				color: #FFFFFF;
				border-radius: 3px;
			}
			li{
				margin: 20px 0;
			}
			.paihang > li > span:nth-child(1){
				margin-right: 10px;
			}
			.paihang > li > span:nth-child(2){
				margin-left: 10px;
			}
			.paihang > li > span:nth-child(3){
				margin-left: 5px;
			}
			.paihang > li:nth-child(1) > span:nth-child(1){
				color: red;
			}
			.paihang > li:nth-child(2) > span:nth-child(1){
				color: #ff4e4e;
			}
			.paihang > li:nth-child(3) > span:nth-child(1){
				color: #ff8e86;
			}
			/* > 子标签 */
			/* li 子标签 */
			/* :nth-child 第几个 */
		</style>
	</head>
	<body>
		<div id="app">
			<ul class="paihang">
				<li v-for="item in newsList" v-news-title="item"></li>
			</ul>
		</div>
		
		<script type="text/javascript">
			//全局自定义指令
			Vue.directive('news-title', function(el, binding){
				console.log(binding);
				//有内容才添加
				el.innerHTML = "<span>"+binding.value.id+"</span>" + binding.value.title;
				if(binding.value.re){
					el.innerHTML += '<span class="re">热</span>';
				}
				if(binding.value.xin){
					el.innerHTML += '<span class="xin">新</span>';
				}
			});
			
			const vm = new Vue({
				el:'#app',
				data:{
					newsList:[
						{id:1,title:'全国人代会第二次全体会议', xin:true, re:true},
						{id:2,title:'昨日新增本土确诊175例无症状330例', xin:false, re:false},
						{id:3,title:'从政府工作报告看生活将有哪些变化', xin:false, re:false},
						{id:4,title:'#妇女节快乐#', xin:false, re:true},
						{id:5,title:'美股遭遇“黑色星期一”', xin:false, re:false},
						{id:6,title:'俄方向乌克兰提出停火3个条件', xin:true, re:false},
						{id:7,title:'上海新增本土确诊4例无症状51例', xin:false, re:true},
						{id:8,title:'泽连斯基又发了一段“基辅视频”', xin:false, re:false}
					]
				}
			})
		</script>
	</body>
</html>
